<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑步</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Q5GbhUmHEuqhMY6qHDS62xxB8KDetWcH">
    </script>
</head>

<body class="dpflex fdcolumn">
    <!-- 载入层 -->
    <div id="loadMask" class="load-mask">
        <p>Loading</p>
    </div>
    <div id="outMask" class="out-mask">
        <p>Loading</p>
    </div>

    <!-- 载入运动头部封装 -->
    <header id="sportsHeader"></header>

    <!-- 初始地图 -->
    <main class="dpflex fdcolumn flex1">
        <!-- 数据显示 -->
        <div class="run-title">
            <h4>目前积累跑步距离：</h4>
            <p class="run-data">
                <span id="runKm">0000</span>公里
            </p>
        </div>
        <!-- 地图区域 -->
        <div id="map" class="flex1 map">
            <!-- 放地图的位置，不要放其它内容 -->
        </div>
        <!-- 开始按钮 -->
        <div id="goBtn" class="go-btn">
            GO
        </div>
    </main>

    <!-- 倒计时蒙层 -->
    <div id="maskTime" class="masks mask-time">
        <!-- 内容区 -->
        <div class="data-cont">
            <span id="timeNum" class="time-num"></span>
        </div>
    </div>

    <!-- 运动中数据蒙层 -->
    <div id="maskData" class="masks mask-data">
        <!-- 内容区 -->
        <div class="data-cont mask-data-cont">
            <!-- 标题 -->
            <section>
                <p class="run-category">户外跑</p>
                <p class="run-statu">运动中</p>
            </section>

            <!-- 公里数 -->
            <p class="run-mile">
                <span id="nowKm" class="mile-data">00.00</span>公里
            </p>

            <!-- GPS -->
            <p class="dpflex location">
                <span class="gps-text">GPS信号低,数据精准度低</span>
                <span id="iconLocation" class="iconfont icon-run-location"></span>
            </p>

            <!-- 速度时间千卡 -->
            <div class="dpflex data-info">
                <div class="info-item">
                    <span class="iconfont icon-run-speed"></span>
                    <p>配速</p>
                    <span id="speed">00'00"</span>
                </div>
                <div class="info-item">
                    <span class="iconfont icon-run-time"></span>
                    <p>用时</p>
                    <span id="takeTime">00:00:00</span>
                </div>
                <div class="info-item">
                    <span class="iconfont icon-run-calorie"></span>
                    <p>千卡</p>
                    <span id="calorie">00.00</span>
                </div>
            </div>

            <!-- 按钮 -->
            <div class="dpflex data-btns">
                <!-- 暂停 -->
                <div id="pauseBtn" class="pause-btn ">
                    <span class="iconfont icon-run-pause"></span>
                    <p class="mt10">暂停</p>
                </div>
                <!-- 继续 -->
                <div id="continueBtn" class="continue-btn">
                    <span class="iconfont icon-run-play"></span>
                    <p class="mt10">继续</p>
                </div>
                <!-- 结束 -->
                <div id="stopBtn" class="stop-btn">
                    <span class="iconfont icon-run-over"></span>
                    <p class="mt10">结束</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 地图模式蒙层 -->
    <div id="mapMask" class="masks mask-map">
        <!-- 内容区 -->
        <div class="data-cont mask-map-cont">
            <!-- 返回按钮 -->
            <div id="backBtn" class="map-back">
                <span class="iconfont icon-train-detail-back"></span>
            </div>
            <!-- 结束按钮 -->
            <div id="finishBtn" class="map-finish">
                <span>完成</span>
            </div>
            <!-- 数据框 -->
            <div class="map-text">
                <div class="map-text-cont">
                    <h3>
                        户外跑
                        <span id="cardRunKm" class="run-km">0</span>公里
                        <span id="nowDate" class="now-date">00-00-00</span>
                    </h3>
                    <!-- 当前日期 -->
                    <div class="dpflex map-data">
                        <div class="map-item">
                            <p>配速</p>
                            <span id="mapSpeed">00'00"</span>
                        </div>
                        <div class="map-item">
                            <p>用时</p>
                            <span id="mapTakeTime">00:00:00</span>
                        </div>
                        <div class="map-item">
                            <p>千卡</p>
                            <span id="mapCalorie">00.00</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 地图 -->
            <div id="mapMode" class="map-mode"></div>
        </div>
    </div>

    <!-- 载入底部封装 -->

    <!-- js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</body>

</html>